@include('common.header')
<script type="text/javascript" >
	
	// 获取父类相对应的子类列表 
	// 参数：id值 id = 'category_1'
	var i=2;
	function getSonCategory( id )
	{
		// 将当前下拉框 以下的其他下拉框 全部清除
		$("#"+id).nextAll().remove();
		// 获取当前选择的分类id		
		var category_id	=	$("#"+id).val();	
		// 0代表根类 没有子类 要创建根类
		if( category_id==0 ){					
			return false;
		}
		// 按'_'分割 获取字母部分 category
		var arr=id.split('_'); 	
		// 给 下一级 下拉框 新的id名( category_2 )
		var new_id= arr[0]+'_'+i;	
		// 获取相对应的子类列表 
		$.ajax({
			type:"post",
			url:"{{ url('/getSonCategory') }}",
			data:{category_id:category_id,new_id:new_id,_token:_token},
			async:false,    						
			dataType:"html",
			success:function(back){
				if( back!='' ){
					// 在同辈后 追加
					$('#'+id).after(back);
					i++;
				}
			}
		});
	}
	
	$(function(){
	
		// 一进入页面就找一级分类下的子分类
		getSonCategory('category_1');
		
		
		// 点击 创建 编辑 栏目
		$(".btn-danger").click(function()
		{
			// 栏目 名称
			var name	=	$("input[name='name']").val();
			// 标题
			var title	=	$("input[name='title']").val();
			// 关键词
			var keywords	=	$("input[name='keywords']").val();
			// 描述
			var desc	=	$("input[name='desc']").val();
			// 定义 分类数组
			var category	= [];	
			// 定义 分类数组的下标				
			var num=1;				
			// 获取 每个下拉框的选中值
			$("select option:selected").each(function(){
				var category_id=$(this).val();
				category[num]=category_id;
				num++;
			});	
			num=1;
			
			// 获取是否有分类ID
			var categoryId = "{{ $categoryInfo->id or 'add'  }}";
			// alert(categoryId);
			// return false;
			// 创建
			var url = "{{ url('/categoryAdd') }}";
			$.ajax({
				type:"post",
				url:url,
				data:{name:name,title:title,keywords:keywords,desc:desc,category:category,categoryId:categoryId,_token:_token},
				async:true,    						
				dataType:"json",
				success:function(back)
				{
					if( back['show_info'].indexOf("成功") > 0  )
					{
						$(".btn-danger").attr('disabled',true);
					}		
					$(".opa").html(back['show_info']);
					$(".opa").slideDown(1000);
					$(".opa").delay(1500).slideUp(1000);
								
				}
			});
		});
		
	});

</script>


<div class="row" style="width:100%;margin-top:110px;" >
	
	<div class="col-md-3" style="color:#32CD32;font-size:22px;text-align:center;" >
		@if( isset($category_info->id ) )
			修改栏目
		@else
			新增栏目
		@endif
	</div>
	<div class="col-md-9">
  
		<!-- 栏目表单 -->
		<label class="col-sm-2 control-label">选择栏目</label>
		<div class="col-sm-10">
			
			
			@if( isset($categoryInfo->id ) )
				<!-- 编辑栏目 仅可查看 不能修改 -->
				@forelse( $category_path as $key => $category_info )
					
					<!-- 第一个 栏目下拉框 -->
					@if( $key==1 )
						<select style="width:auto;float:left;" class="form-control" id="category_{{ $key }}" onchange="getSonCategory('category_{{ $key }}');" disabled >
						<option value="0" >1级栏目</option>
						<!-- 遍历所有一级分类 -->
						@forelse( $all_first_category as $category )
							@if( $category_info['id']==$category->id )
								<!--第一级分类先选中 -->
								<option value="{{ $category->id }}" selected >
									{{ $category->name }}
								</option>
							@else
								<option value="{{ $category->id }}" >
									{{ $category->name }}
								</option>
							@endif
						@empty
						@endforelse
						</select>
					@else
					<!-- 第二个及以后分类下拉框 -->
					<script type='text/javascript'>
						$(function(){
							var id = {{ $key }};
							var cid = {{ $category_info['id'] }};
							// ajax必须同步才可以选中 异步会选不中
							$( "#category_"+id ).val(cid);
							// 不让选
							$( "#category_"+id ).attr('disabled',true);
							getSonCategory("category_"+id);
						}); 
					</script>
					@endif
				
				
				@empty
				@endforelse
			
			@else
				<!-- 创建 -->
				<select style="width:auto;float:left;" class="form-control" id="category_1" onchange="getSonCategory('category_1');"  >
				
					
					<option value="0" >1级栏目</option>
					@forelse ($all_first_category as $category)
						<option value="{{ $category->id }}" >{{ $category->name }}</option>
					@empty
					@endforelse
				
				</select>
			@endif
			
			
			
		</div>
		
		<br/><br/>
		
		<!-- 栏目名称 -->
		<div  class="form-group" style="margin-top:20px;">
			<label class="col-sm-2 control-label">栏目名称</label>
			<div class="col-sm-10">
				<input style="width:300px;" type="text" name="name" value="{{ $categoryInfo->name or '' }}" class="form-control"  placeholder="栏目名称">
			</div>
		</div>
		
		
		
		<br/><br/>
		
		<!-- 标题 -->
		<div  class="form-group" style="margin-top:20px;">
			<label class="col-sm-2 control-label">标题</label>
			<div class="col-sm-10">
				<input style="width:300px;" type="text" name="title" value="{{ $categoryInfo->title or '' }}" class="form-control"  placeholder="标题" />
			</div>
		</div>
		
		
		<br/><br/>
		
		<!-- 关键词 -->
		<div  class="form-group" style="margin-top:20px;">
			<label class="col-sm-2 control-label">关键词</label>
			<div class="col-sm-10">
				<input style="width:300px;" type="text" name="keywords" value="{{ $categoryInfo->keywords or '' }}" class="form-control"  placeholder="关键词">
			</div>
		</div>
		
		
		<br/><br/>
		
		<!-- 描述 -->
		<div  class="form-group" style="margin-top:20px;">
			<label class="col-sm-2 control-label">描述</label>
			<div class="col-sm-10">
				<input style="width:500px;" type="text" name="desc" value="{{ $categoryInfo->desc or '' }}" class="form-control"  placeholder="描述">
			</div>
		</div>
		
		<br/><br/><br/>

		<!-- 按钮 -->
		<div style="overflow:hidden;width:450px;">
			<button  style="width:200px;float:left;" class="btn btn-danger"  >
				@if( isset( $categoryInfo->id ) )
					修改栏目
				@else
					新增栏目
				@endif
			</button>
			<div style="margin-left:50px;float:left;margin-bottom:200px;">
				<a href="javascript:" onclick="self.location=document.referrer;" style="width:200px;" class="btn btn-success">
					返回
				</a>
			</div>
		</div>
	</div>
</div>
	

@extends('common.footer')